<template>
  <div class="list-container">
    <div class="sortList clearfix">
<<<<<<< HEAD
       <!-- 轮播图 -->
      <div class="center">       
        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/banner1.jpg" alt="">
            </div>
            <!-- <div class="swiper-slide">
              <img src="./images/banner2.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="./images/banner3.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="./images/banner4.jpg" alt="">
            </div> -->
            <!-- 分离器 -->
            <div class="swiper-pagination"></div>
            <!-- 导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>       
=======
      
      <!-- 轮播图 -->
      <div class="center">       
        <Carousel :carouselList="getBannerList.data"/>        
>>>>>>> ecb56e7 (first commit)
      </div>

       <!-- 右展示区 -->
      <div class="right">
        <!-- 上部 -->
        <div class="news">
          <!-- 头部标题 -->
          <h4>
            <em class="f1">尚品汇快报</em>
            <span class="fr tip">更多</span>
          </h4>
          <div class="clearrix"></div>
          <!-- 内容 -->
          <ul class="news-list unstyled">
            <li><span class="bold">[特惠]</span>备战开学季，全员半价购数码</li>
            <li><span class="bold">[公告]</span>备战开学季，全员半价购数码</li>
            <li><span class="bold">[特惠]</span>备战开学季，全员半价购数码</li>
            <li><span class="bold">[公告]</span>备战开学季，全员半价购数码</li>
            <li><span class="bold">[特惠]</span>备战开学季，全员半价购数码</li>
          </ul>
        </div>

        <!-- 下部 -->
        <ul class="lifeservices">
          <li class=" life-item ">
            <i class="list-item"></i>
            <span class="service-intro">话费</span>
          </li>
          <li class=" life-item ">
            <i class="list-item"></i>
            <span class="service-intro">机票</span>
          </li>
          <li class=" life-item ">
            <i class="list-item"></i>
            <span class="service-intro">电影票</span>
          </li>
          <li class=" life-item ">
            <i class="list-item"></i>
            <span class="service-intro">游戏</span>
          </li>
          <li class=" life-item">
            <i class="list-item"></i>
            <span class="service-intro">彩票</span>
          </li>
          <li class=" life-item">
            <i class="list-item"></i>
            <span class="service-intro">加油站</span>
          </li>
          <li class=" life-item">
            <i class="list-item"></i>
            <span class="service-intro">酒店</span>
          </li>
          <li class=" life-item">
            <i class="list-item"></i>
            <span class="service-intro">火车票</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">众筹</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">理财</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">礼品卡</span>
          </li>
          <li class="life-item">
            <i class="list-item"></i>
            <span class="service-intro">白条</span>
          </li>
        </ul>

<<<<<<< HEAD
=======
        <!-- 韩国明星图片 -->
>>>>>>> ecb56e7 (first commit)
        <div class="ads">
          <img src="./images/ad1.png" />
        </div>

      </div>
<<<<<<< HEAD
=======

>>>>>>> ecb56e7 (first commit)
    </div>
  </div>
</template>

<script>
<<<<<<< HEAD
export default {
  name: "ListContainer",
=======
import {mapState} from "vuex";
import Carousel from "../../../components/Carousel/index.vue";
export default {
  name: "ListContainer",
  computed: {
    ...mapState({
      getBannerList: state => {
        if(state.home.getBannerList) {
          return state.home.getBannerList;
        }else {
          return [];
        }
        
      },
    }),
  }, 
  mounted() {
    this.$store.dispatch("bannerList");
  },
  components: {
    Carousel,
  }
>>>>>>> ecb56e7 (first commit)
}
</script>

<style scoped>
  .list-container {
    width: 1200px;
    margin: 0 auto;
  }
  .list-container .sortList {
    height: 464px;
    padding-left: 210px;
  }
  .list-container .sortList .center {
    box-sizing: border-box;
    width: 740px;
    height: 100%;
    padding: 5px;
    float: left;
  }

  
  /* 基本样式 */
  .list-container .sortList .right {
    float: left;
    width: 250px;
  }

  /* 上部分 */
  .list-container .sortList .right .news {
    border: 1px solid #e4e4e4;
    margin-top: 5px;
  }
   /* 右展示区标题 */
  .list-container .sortList .right .news h4 {
    border-bottom: 1px solid #e4e4e4;
    padding: 5px 10px;
    margin: 5px 5px 0;
    line-height: 22px;
    overflow: hidden;
    font-size: 14px;
  }
  .list-container .sortList .right .news h4 .fl {
    float: left;
  }
  .list-container .sortList .right .news h4 .fr {
    float: right;
    font-size: 12px;
    font-weight: 400;
  }
  /* 内容 */
  .list-container .sortList .right .news .news-list {
    padding: 5px 15px;
    line-height: 26px;
    font-size: 12px;
    font-weight:500;
  }
  .list-container .sortList .right .news .news-list .bold {
    font-weight: 700;
    font-size: 13px;
  }

  /* 下部分 */
  .list-container .sortList .right .lifeservices {
    border-right: 1px solid #e4e4e4;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
  }
  .list-container .sortList .right .lifeservices .life-item {
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    margin-right: -1px;
    height: 64px;
    text-align: center;
    position: relative;
    cursor: pointer;
    width: 25%;
  }

<<<<<<< HEAD
=======
  /* 精灵图 */
>>>>>>> ecb56e7 (first commit)
  .list-container .sortList .right .lifeservices .life-item .list-item {
    background-image: url("./images/icons.png");
    width: 61px;
    height: 40px;
    display: block;
  }
  .list-container .sortList .right .lifeservices .life-item .service-intro {
    line-height: 22px;
    font-size: 13px;
    width: 60px;
    display: block;
  }
  /* 精灵图位置 */
  .list-container .sortList .right .lifeservices .life-item:nth-child(1) .list-item {
    background-position: 0px -5px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(2) .list-item {
    background-position: 0px -5px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(3) .list-item {
    background-position: -62px -5px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(4) .list-item {
    background-position: -190px -5px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(5) .list-item {
    background-position: 0px -76px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(6) .list-item {
    background-position: -62px -76px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(7) .list-item {
    background-position: -190px -76px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(8) .list-item {
    background-position: -190px -76px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(9) .list-item {
    background-position: 0px -146px;
  }
  .list-container .sortList .right .lifeservices .life-item.service-intro:nth-child(10) .list-item {
    background-position: -62px -146px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(11) .list-item {
    background-position: -126px -146px;
  }
  .list-container .sortList .right .lifeservices .life-item:nth-child(12) .list-item {
    background-position: -190px -146px;
  }

  /* 图片 */
  .list-container .sortList .right .ads {
    margin-top: 5px;
  }
  .list-container .sortList .right .ads img {
    opacity: 0.8;
    transition: all 400ms;
  }
  .list-container .sortList .right .ads:hover {
    opacity: 1;
  }
</style>